<template>
  <view class="box">
<!--    <view class="mt-85 text-center size-26">-->
<!--      <text class="mr-10">支付剩余时间</text>-->
<!--      <u-count-down :timestamp="time" font-size="26"></u-count-down>-->
<!--    </view>-->
    <view class="yellow bold mt-15 text-center">
      <text>￥</text>
      <text class="size-40">{{price}}</text>
    </view>
    <view class="bg-white pt-30 mt-80">
      <view class="size-34 bold plr-36 mb-20">
        支付方式
      </view>
      <view class="plr-36">
        <u-radio-group v-model="value" active-color="#00C28E">
          <u-radio name="1" class="w100 bb ptb-30">
            <view class="flex_l">
              <image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/wx.png" mode=""></image>
              微信支付
            </view>
          </u-radio>
          <!-- #ifdef APP-PLUS -->
          <u-radio name="2" class="w100 ptb-30">
            <view class="flex_l">
              <image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/zfb.png" mode=""></image>
              支付宝支付
            </view>
          </u-radio>
          <!-- #endif -->
          <!-- <u-radio name="3" class="w100 ptb-30">
            <view class="flex_l">
              <image style="width: 55rpx;height: 55rpx; margin-right: 20rpx;" src="../../static/wallet.png" mode=""></image>
              余额支付
            </view>
          </u-radio> -->
        </u-radio-group>
      </view>
    </view>
    <view class="fixed-bottom pd-36">
      <u-button type="primary" @click="pay">确认支付</u-button>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import {showToast} from "../../utils/index";
export default {
  data() {
    return {
      order_id: '',
      coupon_id:'',
      price: '',
      time: 0,
      value: 1,
      code: '',
      url:""
    };
  },
  computed: {
    // ...mapState(['url'])
  },
  onLoad(option) {
    this.order_id = option.id
    this.coupon_id = option.coupon_id
    this.init()
    // #ifdef H5
    // console.log(location.href);
    // 回调回来接收code，然后调取支付
    // if (location.href.includes('code')) {
    // 	this.code = location.href.split('?')[1].split('&')[0].split('=')[1]
    // 	this.payAPI()
    // } else {
    // 	this.$store.commit('getUrl', encodeURIComponent(location.href))
    // }
    // #endif
  },
  methods: {
    init() {
      // this.$http('/addons/ddrive/hyorder/info', {
      //   order_id: this.order_id
      // }).then(data => {
      //   this.price = data.discount_price
      //   this.time = data.createtime + 15 * 60 - (new Date()).getTime() / 1000
      // })
    },
    pay() {
      try {
        uni.showLoading({
          title: '准备支付中',
          mask: true
        });
        this.$http('/addons/ddrive/hyorder/driver_pay', {
          order_id: this.order_id,
          coupon_id: this.coupon_id,
          type: 'user_wechat',
        }, "POST").then(data => {
          console.log(data);
          const _this = this
          this.$JSSDK.config({
            debug: false,
            appId: data.appId,
            timestamp: data.timeStamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: ["chooseWXPay"]
          })
          this.$JSSDK.ready(function () {
            _this.$JSSDK.chooseWXPay({
              appId: data.appId,
              timestamp: data.timeStamp,
              nonceStr: data.nonceStr,
              package: data.package,
              signType: data.signType,
              paySign: data.paySign,
              success: function (res) {
                uni.hideLoading()
                showToast('支付成功', 'success');
                _this.qiangDan(_this.order_id)
                // _this.handleRecordList()
              },
              fail: function (error) {
                console.error(error)
                uni.hideLoading()
                showToast('支付失败', 'none')
              }
            })
          })

        });
      } catch (err) {
        showToast("支付失败", "none");
      } finally {
        uni.hideLoading()
      }
      // value  1 微信  2 支付宝  3 余额
      // 如果是H5的微信支付，需要先授权，授权回调回来获取code，再调取支付
      // if (this.value == 1) {
      // 	// #ifdef H5
      // 	location.href =
      // 		`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9f0c3a5ea0ad7182&redirect_uri=${this.url}&response_type=code&scope=snsapi_base&state=STATE#wechat_re`
      // 	// #endif
      // 	// #ifdef MP-WEIXIN
      // 	let _this = this
      // 	uni.login({
      // 	  provider: 'weixin',
      // 	  success(loginRes) {
      // 	    console.log(loginRes);
      // 			_this.code = loginRes.code
      // 			_this.payAPI()
      // 	  }
      // 	});
      // 	// #endif
      // 	// #ifdef APP-PLUS
      // 	this.payAPI()
      // 	// #endif
      // } else {
      // 	this.payAPI('alipay')
      // }
    },
    qiangDan(id) {
      this.$http('/addons/ddrive/hyorder/tasking', {
        order_id: id
      }, "POST").then(() => {
        uni.showToast({
          title: '抢单成功'
        })
        // setTimeout(() => {
        this.toDetail(id)
        // }, 200)
      })
    },
    toDetail(id) {
      // alert(id)
      window.location.href="https://hcb-driver.dindong.cn/#/pages/huoyun/order-detail?id="+id
      // uni.navigateTo({
      //   url: '/pages/huoyun/order-detail?id=' + id
      // })
    },
    radioChange(e) {
      this.value = e.detail.value
    },
  }
}
</script>

<style lang="scss" scoped>
/deep/.u-primary-hover {
  background: linear-gradient(to right,#00b6b4,#00d496) !important;
}
/deep/.u-radio {
  display: flex;
  flex-direction: row-reverse;
}

/deep/.u-radio-group {
  width: 100% !important;
}

/deep/.u-radio__label {
  width: 100%;
}
</style>
